<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>新世界</title>
</head>
<body>
    <div class="box">
        <!-- 搜索 -->
        <div class="search">
            <p class="p1">查找新世界城市活动信息</p>
            <div class="line"></div>
            <p class="p2">每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
            <div class="search-con">
                <div class="select1">
                    <p>国家</p>
                </div>
                <ul class="ul1">
                    <li>中国</li>
                    <li>美国</li>
                    <li>法国</li>
                    <li>英国</li>
                    <li>意大利</li>
                </ul>
                <div class="select2">
                    <p>省份</p>
                </div>
                <ul class="ul2">
                        <li>北京市</li>
                        <li>天津市</li>
                        <li>上海市</li>
                        <li>江苏省</li>
                        <li>浙江省</li>
                </ul>
                <div class="select3">
                    <p>城市</p>
                </div>
                <ul class="ul3">
                        <li>南京</li>
                        <li>济南</li>
                        <li>西安</li>
                        <li>杭州</li>
                        <li>宿迁</li>
                </ul>
                <p>搜&nbsp;&nbsp;&nbsp;&nbsp;索</p>
            </div>
        </div>
        <!-- <select name="name" id="name">
            <option>中国</option>
            <option>中国</option>
            <option>中国</option>
            <option>中国</option>
        </select> -->
    </div>
    
    <script src="./js/jquery.min.js"></script>
    <script>
                $(".search-con>div").click(function(){
                    if($(this).index() == 0){
                        $(".search-con> ul").removeClass("showul");
                        $(".search-con>.ul1").addClass("showul");
                        $(".search-con>.ul1 li").click(function(){
                            $(".search-con>.ul1").removeClass("showul");
                            $(".search-con>.select1>p").text($(this).text());
                        });
                    }else if($(this).index() == 2){
                        $(".search-con> ul").removeClass("showul");
                        $(".search-con>.ul2").addClass("showul");
                        $(".search-con>.ul2 li").click(function(){
                            $(".search-con>.ul2").removeClass("showul");
                            $(".search-con>.select2>p").text($(this).text());
                        });
                    }else{
                        $(".search-con> ul").removeClass("showul");
                        $(".search-con>.ul3").addClass("showul");
                        $(".search-con>.ul3 li").click(function(){
                            $(".search-con>.ul3").removeClass("showul");
                            $(".search-con>.select3>p").text($(this).text());
                        });
                    }
                });
        
        // $(".box").click(function(){
        //     if($(".search-con ul").hasClass("showul")){
        //         $(".search-con ul").removeClass("showul");
        //     }else{
        //         //alert("执行下拉");
               
        //     }
            
        // });
    </script>
</body>
</html>